<div class="form-horizontal">
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.enabled-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.enabled' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.enabled" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Select with tags-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.allowedScopes-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.allowedScopes' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <tag-input theme='bootstrap' name="allowedScopes" [modelAsStrings]="true" placeholder='+Scope' [(ngModel)]="model.allowedScopes">
                    <tag-input-dropdown [autocompleteObservable]='requestScopeItems'>
                    </tag-input-dropdown>
                </tag-input>
            </div>
        </div>
    </fieldset>

    <!--Select with tags-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.redirectUris-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.redirectUris' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <tag-input theme='bootstrap' name="redirectUris" [modelAsStrings]="true" placeholder='+Url' [(ngModel)]="model.redirectUris"></tag-input>
            </div>
        </div>
    </fieldset>

    <!--Button-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.clientSecrets-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.clientSecrets' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <a [routerLink]="['/clients', model.clientId, 'secrets']" class="btn btn-primary">{{
                        'client.details.clientSecrets' | translate }}</a>
            </div>
        </div>
    </fieldset>

    <!--Select with tags-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-4">
                <label class="col-form-label">{{ 'client.details.allowedGrantTypes' | translate }} </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.allowedGrantTypes-tooltip' | translate" [popoverTitle]="'client.details.allowedGrantTypes' | translate" placement="auto" container="body" [adaptivePosition]="false">
                    <i class="fa fa-comment-dots" placement="top"></i>
                </button>
            </div>
            <div class="col-xl-8">
                <tag-input theme='bootstrap' name="allowedGrantTypes" [modelAsStrings]="true" placeholder='+Grant' [(ngModel)]="model.allowedGrantTypes"></tag-input>
            </div>
            <div class="col-xl-8 offset-4">
                <small>Options:</small>
                <br>
                <button class="btn btn-oval btn-sm btn-info mb-1" (click)="addGrantType('implicit')" type="button">implicit&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></button>&nbsp;
                <button class="btn btn-oval btn-sm btn-info mb-1" (click)="addGrantType('hybrid')" type="button">hybrid&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></button>&nbsp;
                <button class="btn btn-oval btn-sm btn-info mb-1" (click)="addGrantType('client_credentials')" type="button">client_credentials&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></button>&nbsp;
                <button class="btn btn-oval btn-sm btn-info mb-1" (click)="addGrantType('authorization_code')" type="button">authorization_code&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></button>&nbsp;
                <button class="btn btn-oval btn-sm btn-info mb-1" (click)="addGrantType('password')" type="button">password&nbsp;&nbsp;<i class="fa fa-plus-circle"></i></button>&nbsp;
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.requireConsent-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.requireConsent' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.requireConsent" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.allowRememberConsent-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.allowRememberConsent' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.allowRememberConsent" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>


    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.allowOfflineAccess-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.allowOfflineAccess' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.allowOfflineAccess" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>


    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.requireClientSecret-tooltip' | translate" class="col-xl-4 col-form-label">{{
                    'client.details.requireClientSecret' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.requireClientSecret" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Select-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.protocolType-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.protocolType' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <ng-select [items]="[model.protocolType]" [(ngModel)]="model.protocolType" placeholder="ProtocolType">
                </ng-select>
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.requirePkce-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.requirePkce' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.requirePkce" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.allowPlainTextPkce-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.allowPlainTextPkce' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.allowPlainTextPkce" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-4">
                <label class="col-form-label">{{ 'client.details.allowAccessTokensViaBrowser' | translate }}
                </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.allowAccessTokensViaBrowser-tooltip' | translate" [popoverTitle]="'client.details.allowAccessTokensViaBrowser' | translate" placement="auto" container="body" [adaptivePosition]="false">
                    <i class="fa fa-comment-dots" placement="top"></i>
                </button>
            </div>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.allowAccessTokensViaBrowser" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>

    <!--Button-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.properties-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.properties' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <a [routerLink]="['/clients', model.clientId, 'properties']" class="btn btn-primary">{{
                    'client.details.properties' | translate }}</a>
            </div>
        </div>
    </fieldset>
</div>